diff --git a/swh/web/assets/src/bundles/admin/origin-save.js b/swh/web/assets/src/bundles/admin/origin-save.js
index 16a21cd4..ae2a5ce8 100644
--- a/swh/web/assets/src/bundles/admin/origin-save.js
+++ b/swh/web/assets/src/bundles/admin/origin-save.js
@@ -1,315 +1,321 @@
 /**
  * Copyright (C) 2018-2019  The Software Heritage developers
  * See the AUTHORS file at the top-level directory of this distribution
  * License: GNU Affero General Public License version 3, or any later version
  * See top-level LICENSE file for more information
  */
 
-import {handleFetchError, csrfPost} from 'utils/functions';
+import {handleFetchError, csrfPost, htmlAlert} from 'utils/functions';
 
 let authorizedOriginTable;
 let unauthorizedOriginTable;
 let pendingSaveRequestsTable;
 let acceptedSaveRequestsTable;
 let rejectedSaveRequestsTable;
 
 function enableRowSelection(tableSel) {
   $(`${tableSel} tbody`).on('click', 'tr', function() {
     if ($(this).hasClass('selected')) {
       $(this).removeClass('selected');
       $(tableSel).closest('.tab-pane').find('.swh-action-need-selection').prop('disabled', true);
     } else {
       $(`${tableSel} tr.selected`).removeClass('selected');
       $(this).addClass('selected');
       $(tableSel).closest('.tab-pane').find('.swh-action-need-selection').prop('disabled', false);
     }
   });
 }
 
 export function initOriginSaveAdmin() {
   $(document).ready(() => {
 
     $.fn.dataTable.ext.errMode = 'throw';
 
     authorizedOriginTable = $('#swh-authorized-origin-urls').DataTable({
       serverSide: true,
       ajax: Urls.admin_origin_save_authorized_urls_list(),
       columns: [{data: 'url', name: 'url'}],
       scrollY: '50vh',
       scrollCollapse: true,
       info: false
     });
     enableRowSelection('#swh-authorized-origin-urls');
 
     unauthorizedOriginTable = $('#swh-unauthorized-origin-urls').DataTable({
       serverSide: true,
       ajax: Urls.admin_origin_save_unauthorized_urls_list(),
       columns: [{data: 'url', name: 'url'}],
       scrollY: '50vh',
       scrollCollapse: true,
       info: false
     });
     enableRowSelection('#swh-unauthorized-origin-urls');
 
     let columnsData = [
       {
         data: 'id',
         name: 'id',
         visible: false,
         searchable: false
       },
       {
         data: 'save_request_date',
         name: 'request_date',
         render: (data, type, row) => {
           if (type === 'display') {
             let date = new Date(data);
             return date.toLocaleString();
           }
           return data;
         }
       },
       {
         data: 'origin_type',
         name: 'origin_type'
       },
       {
         data: 'origin_url',
         name: 'origin_url',
         render: (data, type, row) => {
           if (type === 'display') {
             const sanitizedURL = $.fn.dataTable.render.text().display(data);
             return `<a href="${sanitizedURL}">${sanitizedURL}</a>`;
           }
           return data;
         }
       }
     ];
 
     pendingSaveRequestsTable = $('#swh-origin-save-pending-requests').DataTable({
       serverSide: true,
       ajax: Urls.origin_save_requests_list('pending'),
       searchDelay: 1000,
       columns: columnsData,
       scrollY: '50vh',
       scrollCollapse: true,
       order: [[0, 'desc']],
       responsive: {
         details: {
           type: 'none'
         }
       }
     });
     enableRowSelection('#swh-origin-save-pending-requests');
 
     rejectedSaveRequestsTable = $('#swh-origin-save-rejected-requests').DataTable({
       serverSide: true,
       ajax: Urls.origin_save_requests_list('rejected'),
       searchDelay: 1000,
       columns: columnsData,
       scrollY: '50vh',
       scrollCollapse: true,
       order: [[0, 'desc']],
       responsive: {
         details: {
           type: 'none'
         }
       }
     });
     enableRowSelection('#swh-origin-save-rejected-requests');
 
     columnsData.push({
       data: 'save_task_status',
       name: 'save_task_status',
       render: (data, type, row) => {
         if (data === 'succeed') {
           let browseOriginUrl = Urls.browse_origin(row.origin_url);
           return `<a href="${browseOriginUrl}">${data}</a>`;
         }
         return data;
       }
     });
 
     acceptedSaveRequestsTable = $('#swh-origin-save-accepted-requests').DataTable({
       serverSide: true,
       ajax: Urls.origin_save_requests_list('accepted'),
       searchDelay: 1000,
       columns: columnsData,
       scrollY: '50vh',
       scrollCollapse: true,
       order: [[0, 'desc']],
       responsive: {
         details: {
           type: 'none'
         }
       }
     });
     enableRowSelection('#swh-origin-save-accepted-requests');
 
     $('#swh-origin-save-requests-nav-item').on('shown.bs.tab', () => {
       pendingSaveRequestsTable.draw();
     });
 
     $('#swh-origin-save-url-filters-nav-item').on('shown.bs.tab', () => {
       authorizedOriginTable.draw();
     });
 
     $('#swh-authorized-origins-tab').on('shown.bs.tab', () => {
       authorizedOriginTable.draw();
     });
 
     $('#swh-unauthorized-origins-tab').on('shown.bs.tab', () => {
       unauthorizedOriginTable.draw();
     });
 
     $('#swh-save-requests-pending-tab').on('shown.bs.tab', () => {
       pendingSaveRequestsTable.draw();
     });
 
     $('#swh-save-requests-accepted-tab').on('shown.bs.tab', () => {
       acceptedSaveRequestsTable.draw();
     });
 
     $('#swh-save-requests-rejected-tab').on('shown.bs.tab', () => {
       rejectedSaveRequestsTable.draw();
     });
 
     $('#swh-save-requests-pending-tab').click(() => {
       pendingSaveRequestsTable.ajax.reload(null, false);
     });
 
     $('#swh-save-requests-accepted-tab').click(() => {
       acceptedSaveRequestsTable.ajax.reload(null, false);
     });
 
     $('#swh-save-requests-rejected-tab').click(() => {
       rejectedSaveRequestsTable.ajax.reload(null, false);
     });
 
   });
 }
 
 export function addAuthorizedOriginUrl() {
   let originUrl = $('#swh-authorized-url-prefix').val();
   let addOriginUrl = Urls.admin_origin_save_add_authorized_url(originUrl);
   csrfPost(addOriginUrl)
     .then(handleFetchError)
     .then(() => {
       authorizedOriginTable.row.add({'url': originUrl}).draw();
+      $('.swh-add-authorized-origin-status').html(
+        htmlAlert('success', 'The origin url prefix has been successfully added in the authorized list.', true)
+      );
     })
     .catch(response => {
-      swh.webapp.showModalMessage(
-        'Duplicated origin url prefix',
-        'The provided origin url prefix is already registered in the authorized list.');
+      $('.swh-add-authorized-origin-status').html(
+        htmlAlert('warning', 'The provided origin url prefix is already registered in the authorized list.', true)
+      );
     });
 }
 
 export function removeAuthorizedOriginUrl() {
   let originUrl = $('#swh-authorized-origin-urls tr.selected').text();
   if (originUrl) {
     let removeOriginUrl = Urls.admin_origin_save_remove_authorized_url(originUrl);
     csrfPost(removeOriginUrl)
       .then(handleFetchError)
       .then(() => {
         authorizedOriginTable.row('.selected').remove().draw();
       })
       .catch(() => {});
   }
 }
 
 export function addUnauthorizedOriginUrl() {
   let originUrl = $('#swh-unauthorized-url-prefix').val();
   let addOriginUrl = Urls.admin_origin_save_add_unauthorized_url(originUrl);
   csrfPost(addOriginUrl)
     .then(handleFetchError)
     .then(() => {
       unauthorizedOriginTable.row.add({'url': originUrl}).draw();
+      $('.swh-add-unauthorized-origin-status').html(
+        htmlAlert('success', 'The origin url prefix has been successfully added in the unauthorized list.', true)
+      );
     })
     .catch(() => {
-      swh.webapp.showModalMessage(
-        'Duplicated origin url prefix',
-        'The provided origin url prefix is already registered in the unauthorized list.');
+      $('.swh-add-unauthorized-origin-status').html(
+        htmlAlert('warning', 'The provided origin url prefix is already registered in the unauthorized list.', true)
+      );
     });
 }
 
 export function removeUnauthorizedOriginUrl() {
   let originUrl = $('#swh-unauthorized-origin-urls tr.selected').text();
   if (originUrl) {
     let removeOriginUrl = Urls.admin_origin_save_remove_unauthorized_url(originUrl);
     csrfPost(removeOriginUrl)
       .then(handleFetchError)
       .then(() => {
         unauthorizedOriginTable.row('.selected').remove().draw();
       })
       .catch(() => {});
   }
 }
 
 export function acceptOriginSaveRequest() {
   let selectedRow = pendingSaveRequestsTable.row('.selected');
   if (selectedRow.length) {
     let acceptOriginSaveRequestCallback = () => {
       let rowData = selectedRow.data();
       let acceptSaveRequestUrl = Urls.admin_origin_save_request_accept(rowData['origin_type'], rowData['origin_url']);
       csrfPost(acceptSaveRequestUrl)
         .then(() => {
           pendingSaveRequestsTable.ajax.reload(null, false);
         });
     };
 
     swh.webapp.showModalConfirm(
       'Accept origin save request ?',
       'Are you sure to accept this origin save request ?',
       acceptOriginSaveRequestCallback);
   }
 }
 
 export function rejectOriginSaveRequest() {
   let selectedRow = pendingSaveRequestsTable.row('.selected');
   if (selectedRow.length) {
     let rejectOriginSaveRequestCallback = () => {
       let rowData = selectedRow.data();
       let rejectSaveRequestUrl = Urls.admin_origin_save_request_reject(rowData['origin_type'], rowData['origin_url']);
       csrfPost(rejectSaveRequestUrl)
         .then(() => {
           pendingSaveRequestsTable.ajax.reload(null, false);
         });
     };
 
     swh.webapp.showModalConfirm(
       'Reject origin save request ?',
       'Are you sure to reject this origin save request ?',
       rejectOriginSaveRequestCallback);
   }
 }
 
 function removeOriginSaveRequest(requestTable) {
   let selectedRow = requestTable.row('.selected');
   if (selectedRow.length) {
     let requestId = selectedRow.data()['id'];
     let removeOriginSaveRequestCallback = () => {
       let removeSaveRequestUrl = Urls.admin_origin_save_request_remove(requestId);
       csrfPost(removeSaveRequestUrl)
         .then(() => {
           requestTable.ajax.reload(null, false);
         });
     };
 
     swh.webapp.showModalConfirm(
       'Remove origin save request ?',
       'Are you sure to remove this origin save request ?',
       removeOriginSaveRequestCallback);
   }
 }
 
 export function removePendingOriginSaveRequest() {
   removeOriginSaveRequest(pendingSaveRequestsTable);
 }
 
 export function removeAcceptedOriginSaveRequest() {
   removeOriginSaveRequest(acceptedSaveRequestsTable);
 }
 
 export function removeRejectedOriginSaveRequest() {
   removeOriginSaveRequest(rejectedSaveRequestsTable);
 }
diff --git a/swh/web/assets/src/bundles/save/index.js b/swh/web/assets/src/bundles/save/index.js
index 85b97b09..c84af7a2 100644
--- a/swh/web/assets/src/bundles/save/index.js
+++ b/swh/web/assets/src/bundles/save/index.js
@@ -1,301 +1,297 @@
 /**
  * Copyright (C) 2018-2019  The Software Heritage developers
  * See the AUTHORS file at the top-level directory of this distribution
  * License: GNU Affero General Public License version 3, or any later version
  * See top-level LICENSE file for more information
  */
 
-import {handleFetchError, csrfPost, isGitRepoUrl, removeUrlFragment} from 'utils/functions';
+import {handleFetchError, csrfPost, isGitRepoUrl, htmlAlert, removeUrlFragment} from 'utils/functions';
 import {validate} from 'validate.js';
 
 let saveRequestsTable;
 
 function originSaveRequest(originType, originUrl,
                            acceptedCallback, pendingCallback, errorCallback) {
   let addSaveOriginRequestUrl = Urls.origin_save_request(originType, originUrl);
   let headers = {
     'Accept': 'application/json',
     'Content-Type': 'application/json'
   };
   $('.swh-processing-save-request').css('display', 'block');
   csrfPost(addSaveOriginRequestUrl, headers)
     .then(handleFetchError)
     .then(response => response.json())
     .then(data => {
       $('.swh-processing-save-request').css('display', 'none');
       if (data.save_request_status === 'accepted') {
         acceptedCallback();
       } else {
         pendingCallback();
       }
     })
     .catch(response => {
       $('.swh-processing-save-request').css('display', 'none');
       errorCallback(response.status);
     });
 }
 
-function htmlAlert(type, message) {
-  return `<div class="alert alert-${type}" role="alert">${message}</div>`;
-}
-
 export function initOriginSave() {
 
   $(document).ready(() => {
 
     $.fn.dataTable.ext.errMode = 'none';
 
     fetch(Urls.origin_save_types_list())
       .then(response => response.json())
       .then(data => {
         for (let originType of data) {
           $('#swh-input-origin-type').append(`<option value="${originType}">${originType}</option>`);
         }
       });
 
     saveRequestsTable = $('#swh-origin-save-requests')
       .on('error.dt', (e, settings, techNote, message) => {
         $('#swh-origin-save-request-list-error').text('An error occurred while retrieving the save requests list');
         console.log(message);
       })
       .DataTable({
         serverSide: true,
         ajax: Urls.origin_save_requests_list('all'),
         searchDelay: 1000,
         columns: [
           {
             data: 'save_request_date',
             name: 'request_date',
             render: (data, type, row) => {
               if (type === 'display') {
                 let date = new Date(data);
                 return date.toLocaleString();
               }
               return data;
             }
           },
           {
             data: 'origin_type',
             name: 'origin_type'
           },
           {
             data: 'origin_url',
             name: 'origin_url',
             render: (data, type, row) => {
               if (type === 'display') {
                 const sanitizedURL = $.fn.dataTable.render.text().display(data);
                 return `<a href="${sanitizedURL}">${sanitizedURL}</a>`;
               }
               return data;
             }
           },
           {
             data: 'save_request_status',
             name: 'status'
           },
           {
             data: 'save_task_status',
             name: 'loading_task_status',
             render: (data, type, row) => {
               if (data === 'succeed') {
                 let browseOriginUrl = Urls.browse_origin(row.origin_url);
                 if (row.visit_date) {
                   browseOriginUrl += `visit/${row.visit_date}/`;
                 }
                 return `<a href="${browseOriginUrl}">${data}</a>`;
               }
               return data;
             }
           }
         ],
         scrollY: '50vh',
         scrollCollapse: true,
         order: [[0, 'desc']],
         responsive: {
           details: {
             type: 'none'
           }
         }
       });
 
     swh.webapp.addJumpToPagePopoverToDataTable(saveRequestsTable);
 
     $('#swh-origin-save-requests-list-tab').on('shown.bs.tab', () => {
       saveRequestsTable.draw();
       window.location.hash = '#requests';
     });
 
     $('#swh-origin-save-request-create-tab').on('shown.bs.tab', () => {
       removeUrlFragment();
     });
 
     let saveRequestAcceptedAlert = htmlAlert(
       'success',
       'The "save code now" request has been accepted and will be processed as soon as possible.'
     );
 
     let saveRequestPendingAlert = htmlAlert(
       'warning',
       'The "save code now" request has been put in pending state and may be accepted for processing after manual review.'
     );
 
     let saveRequestRejectedAlert = htmlAlert(
       'danger',
       'The "save code now" request has been rejected because the provided origin url is blacklisted.'
     );
 
     let saveRequestRateLimitedAlert = htmlAlert(
       'danger',
       'The rate limit for "save code now" requests has been reached. Please try again later.'
     );
 
     let saveRequestUnknownErrorAlert = htmlAlert(
       'danger',
       'An unexpected error happened when submitting the "save code now request'
     );
 
     $('#swh-save-origin-form').submit(event => {
       event.preventDefault();
       event.stopPropagation();
       $('.alert').alert('close');
       if (event.target.checkValidity()) {
         $(event.target).removeClass('was-validated');
         let originType = $('#swh-input-origin-type').val();
         let originUrl = $('#swh-input-origin-url').val();
 
         originSaveRequest(originType, originUrl,
                           () => $('#swh-origin-save-request-status').html(saveRequestAcceptedAlert),
                           () => $('#swh-origin-save-request-status').html(saveRequestPendingAlert),
                           (statusCode) => {
                             $('#swh-origin-save-request-status').css('color', 'red');
                             if (statusCode === 403) {
                               $('#swh-origin-save-request-status').html(saveRequestRejectedAlert);
                             } else if (statusCode === 429) {
                               $('#swh-origin-save-request-status').html(saveRequestRateLimitedAlert);
                             } else {
                               $('#swh-origin-save-request-status').html(saveRequestUnknownErrorAlert);
                             }
                           });
       } else {
         $(event.target).addClass('was-validated');
       }
     });
 
     $('#swh-show-origin-save-requests-list').on('click', (event) => {
       event.preventDefault();
       $('.nav-tabs a[href="#swh-origin-save-requests-list"]').tab('show');
     });
 
     $('#swh-input-origin-url').on('input', function(event) {
       let originUrl = $(this).val().trim();
       $(this).val(originUrl);
       $('#swh-input-origin-type option').each(function() {
         let val = $(this).val();
         if (val && originUrl.includes(val)) {
           $(this).prop('selected', true);
         }
       });
     });
 
     if (window.location.hash === '#requests') {
       $('.nav-tabs a[href="#swh-origin-save-requests-list"]').tab('show');
     }
 
   });
 
 }
 
 export function validateSaveOriginUrl(input) {
   let originUrl = input.value.trim();
   let validUrl = validate({website: originUrl}, {
     website: {
       url: {
         schemes: ['http', 'https', 'svn', 'git']
       }
     }
   }) === undefined;
   let originType = $('#swh-input-origin-type').val();
   if (originType === 'git' && validUrl) {
     // additional checks for well known code hosting providers
     let githubIdx = originUrl.indexOf('://github.com');
     let gitlabIdx = originUrl.indexOf('://gitlab.');
     let gitSfIdx = originUrl.indexOf('://git.code.sf.net');
     let bitbucketIdx = originUrl.indexOf('://bitbucket.org');
     if (githubIdx !== -1 && githubIdx <= 5) {
       validUrl = isGitRepoUrl(originUrl, 'github.com');
     } else if (gitlabIdx !== -1 && gitlabIdx <= 5) {
       let startIdx = gitlabIdx + 3;
       let idx = originUrl.indexOf('/', startIdx);
       if (idx !== -1) {
         let gitlabDomain = originUrl.substr(startIdx, idx - startIdx);
         // GitLab repo url needs to be suffixed by '.git' in order to be successfully loaded
         // This is due to a bug in dulwich < 0.19.11.
         // TODO: remove this check once dulwich >= 0.19.11 is used in production
         validUrl = isGitRepoUrl(originUrl, gitlabDomain) && originUrl.endsWith('.git');
       } else {
         validUrl = false;
       }
     } else if (gitSfIdx !== -1 && gitSfIdx <= 5) {
       validUrl = isGitRepoUrl(originUrl, 'git.code.sf.net/p');
     } else if (bitbucketIdx !== -1 && bitbucketIdx <= 5) {
       validUrl = isGitRepoUrl(originUrl, 'bitbucket.org');
     }
   }
   if (validUrl) {
     input.setCustomValidity('');
   } else {
     input.setCustomValidity('The origin url is not valid or does not reference a code repository');
   }
 }
 
 export function initTakeNewSnapshot() {
 
   let newSnapshotRequestAcceptedAlert = htmlAlert(
     'success',
     'The "take new snapshot" request has been accepted and will be processed as soon as possible.'
   );
 
   let newSnapshotRequestPendingAlert = htmlAlert(
     'warning',
     'The "take new snapshot" request has been put in pending state and may be accepted for processing after manual review.'
   );
 
   let newSnapshotRequestRejectedAlert = htmlAlert(
     'danger',
     'The "take new snapshot" request has been rejected.'
   );
 
   let newSnapshotRequestRateLimitAlert = htmlAlert(
     'danger',
     'The rate limit for "take new snapshot" requests has been reached. Please try again later.'
   );
 
   let newSnapshotRequestUnknownErrorAlert = htmlAlert(
     'danger',
     'An unexpected error happened when submitting the "save code now request".'
   );
 
   $(document).ready(() => {
     $('#swh-take-new-snapshot-form').submit(event => {
       event.preventDefault();
       event.stopPropagation();
 
       let originType = $('#swh-input-origin-type').val();
       let originUrl = $('#swh-input-origin-url').val();
 
       originSaveRequest(originType, originUrl,
                         () => $('#swh-take-new-snapshot-request-status').html(newSnapshotRequestAcceptedAlert),
                         () => $('#swh-take-new-snapshot-request-status').html(newSnapshotRequestPendingAlert),
                         (statusCode) => {
                           $('#swh-take-new-snapshot-request-status').css('color', 'red');
                           if (statusCode === 403) {
                             $('#swh-take-new-snapshot-request-status').html(newSnapshotRequestRejectedAlert);
                           } else if (statusCode === 429) {
                             $('#swh-take-new-snapshot-request-status').html(newSnapshotRequestRateLimitAlert);
                           } else {
                             $('#swh-take-new-snapshot-request-status').html(newSnapshotRequestUnknownErrorAlert);
                           }
                         });
     });
   });
 }
diff --git a/swh/web/assets/src/utils/functions.js b/swh/web/assets/src/utils/functions.js
index 626da729..61c4e224 100644
--- a/swh/web/assets/src/utils/functions.js
+++ b/swh/web/assets/src/utils/functions.js
@@ -1,62 +1,75 @@
 /**
  * Copyright (C) 2018-2019  The Software Heritage developers
  * See the AUTHORS file at the top-level directory of this distribution
  * License: GNU Affero General Public License version 3, or any later version
  * See top-level LICENSE file for more information
  */
 
 // utility functions
 
 export function handleFetchError(response) {
   if (!response.ok) {
     throw response;
   }
   return response;
 }
 
 export function handleFetchErrors(responses) {
   for (let i = 0; i < responses.length; ++i) {
     if (!responses[i].ok) {
       throw responses[i];
     }
   }
   return responses;
 }
 
 export function staticAsset(asset) {
   return `${__STATIC__}${asset}`;
 }
 
 export function csrfPost(url, headers = {}, body = null) {
   headers['X-CSRFToken'] = Cookies.get('csrftoken');
   return fetch(url, {
     credentials: 'include',
     headers: headers,
     method: 'POST',
     body: body
   });
 }
 
 export function isGitRepoUrl(url, domain) {
   let endOfPattern = '\\/[\\w\\.-]+\\/?(?!=.git)(?:\\.git(?:\\/?|\\#[\\w\\.\\-_]+)?)?$';
   let pattern = `(?:git|https?|git@)(?:\\:\\/\\/)?${domain}[/|:][A-Za-z0-9-]+?` + endOfPattern;
   let re = new RegExp(pattern);
   return re.test(url);
 };
 
 export function removeUrlFragment() {
   history.replaceState('', document.title, window.location.pathname + window.location.search);
 }
 
 export function selectText(startNode, endNode) {
   let selection = window.getSelection();
   selection.removeAllRanges();
   let range = document.createRange();
   range.setStart(startNode, 0);
   if (endNode.nodeName !== '#text') {
     range.setEnd(endNode, endNode.childNodes.length);
   } else {
     range.setEnd(endNode, endNode.textContent.length);
   }
   selection.addRange(range);
 }
+
+export function htmlAlert(type, message, closable = false) {
+  let closeButton = '';
+  let extraClasses = '';
+  if (closable) {
+    closeButton =
+      `<button type="button" class="close" data-dismiss="alert" aria-label="Close">
+        <span aria-hidden="true">&times;</span>
+      </button>`;
+    extraClasses = 'alert-dismissible';
+  }
+  return `<div class="alert alert-${type} ${extraClasses}" role="alert">${message}${closeButton}</div>`;
+}
diff --git a/swh/web/templates/admin/origin-save.html b/swh/web/templates/admin/origin-save.html
index d32f8b8c..3bcbfb78 100644
--- a/swh/web/templates/admin/origin-save.html
+++ b/swh/web/templates/admin/origin-save.html
@@ -1,179 +1,183 @@
 {% extends "layout.html" %}
 
 {% comment %}
 Copyright (C) 2018-2019  The Software Heritage developers
 See the AUTHORS file at the top-level directory of this distribution
 License: GNU Affero General Public License version 3, or any later version
 See top-level LICENSE file for more information
 {% endcomment %}
 
 {% load swh_templatetags %}
 {% load render_bundle from webpack_loader %}
 
 {% block header %}
 {{ block.super }}
 {% render_bundle 'admin' %}
 {% endblock %}
 
 {% block title %} Save origin administration {% endblock %}
 
 {% block navbar-content %}
 <h4>Save origin administration</h4>
 {% endblock %}
 
 {% block content %}
 
 <ul class="nav nav-tabs" style="padding-left: 5px;">
   <li class="nav-item"><a class="nav-link active" data-toggle="tab" id="swh-origin-save-requests-nav-item" href="#swh-origin-save-requests">Submitted save origin requests</a></li>
   <li class="nav-item"><a class="nav-link" data-toggle="tab" id="swh-origin-save-url-filters-nav-item" href="#swh-origin-save-url-filters">Origin urls filtering</a></li>
 </ul>
 
 <div class="tab-content">
 
   <div id="swh-origin-save-requests" class="tab-pane active">
     <ul class="nav nav-pills mt-3 mb-3" role="tablist">
       <li class="nav-item">
         <a class="nav-link active" id="swh-save-requests-pending-tab" data-toggle="pill" href="#swh-save-requests-pending" role="tab" aria-controls="swh-save-requests-pending" aria-selected="true">Pending</a>
       </li>
       <li class="nav-item">
         <a class="nav-link" id="swh-save-requests-accepted-tab" data-toggle="pill" href="#swh-save-requests-accepted" role="tab" aria-controls="swh-save-requests-accepted" aria-selected="false">Accepted</a>
       </li>
       <li class="nav-item">
         <a class="nav-link" id="swh-save-requests-rejected-tab" data-toggle="pill" href="#swh-save-requests-rejected" role="tab" aria-controls="swh-save-requests-rejected" aria-selected="false">Rejected</a>
       </li>
     </ul>
     <div class="tab-content">
       <div class="tab-pane fade show active" id="swh-save-requests-pending" role="tabpanel" aria-labelledby="swh-save-requests-pending-tab">
         <table id="swh-origin-save-pending-requests" class="table swh-table swh-table-striped" width="100%">
           <thead>
             <tr>
               <th></th>
               <th data-priority="2">Date</th>
               <th data-priority="3">Type</th>
               <th data-priority="1">Url</th>
             </tr>
           </thead>
         </table>
         <div class="row text-right mt-3">
           <div class="col-md-6">
           </div>
           <div class="col-md-2">
               <button class="btn btn-default swh-action-need-selection" onclick="swh.admin.acceptOriginSaveRequest()" disabled>Accept selected</button>
           </div>
           <div class="col-md-2">
             <button class="btn btn-default swh-action-need-selection" onclick="swh.admin.rejectOriginSaveRequest()" disabled>Reject selected</button>
           </div>
           <div class="col-md-2">
               <button class="btn btn-default swh-action-need-selection" onclick="swh.admin.removePendingOriginSaveRequest()" disabled>Remove selected</button>
           </div>
         </div>
       </div>
       <div class="tab-pane fade" id="swh-save-requests-accepted" role="tabpanel" aria-labelledby="swh-save-requests-accepted-tab">
         <table id="swh-origin-save-accepted-requests" class="table swh-table swh-table-striped" width="100%">
           <thead>
             <tr>
               <th></th>
               <th data-priority="3">Date</th>
               <th data-priority="4">Type</th>
               <th data-priority="1">Url</th>
               <th data-priority="2">Status</th>
             </tr>
           </thead>
         </table>
         <div class="row text-right mt-3">
           <div class="col-md-10">
           </div>
           <div class="col-md-2">
             <button class="btn btn-default swh-action-need-selection" onclick="swh.admin.removeAcceptedOriginSaveRequest()" disabled>Remove selected</button>
           </div>
         </div>
       </div>
       <div class="tab-pane fade" id="swh-save-requests-rejected" role="tabpanel" aria-labelledby="swh-save-requests-rejected-tab">
         <table id="swh-origin-save-rejected-requests" class="table swh-table swh-table-striped" width="100%">
           <thead>
             <tr>
               <th></th>
               <th data-priority="2">Date</th>
               <th data-priority="3">Type</th>
               <th data-priority="1">Url</th>
             </tr>
           </thead>
         </table>
         <div class="row text-right mt-3">
           <div class="col-md-10">
           </div>
           <div class="col-md-2">
             <button class="btn btn-default swh-action-need-selection" onclick="swh.admin.removeRejectedOriginSaveRequest()" disabled>Remove selected</button>
           </div>
         </div>
       </div>
     </div>
   </div>
 
   <div id="swh-origin-save-url-filters" class="tab-pane">
     <ul class="nav nav-pills mt-3 mb-3" role="tablist">
       <li class="nav-item">
         <a class="nav-link active" id="swh-authorized-origins-tab" data-toggle="pill" href="#swh-authorized-origins" role="tab" aria-controls="swh-authorized-origins"
           aria-selected="true">Authorized urls</a>
       </li>
       <li class="nav-item">
         <a class="nav-link" id="swh-unauthorized-origins-tab" data-toggle="pill" href="#swh-unauthorized-origins" role="tab" aria-controls="swh-unauthorized-origins"
           aria-selected="false">Unauthorized urls</a>
       </li>
     </ul>
 
     <div class="tab-content">
       <div class="tab-pane fade show active" id="swh-authorized-origins" role="tabpanel" aria-labelledby="swh-authorized-origins-tab">
         <table id="swh-authorized-origin-urls" class="table swh-table swh-table-striped" width="100%">
           <thead>
             <tr>
               <th>Url</th>
             </tr>
           </thead>
         </table>
         <div class="row text-right mt-3">
           <div class="col-md-10">
             <div class="input-group">
               <input class="form-control" placeholder="Enter authorized origin url prefix to add" type="text" id="swh-authorized-url-prefix"/>
               <div class="input-group-append">
                 <button class="btn btn-default" onclick="swh.admin.addAuthorizedOriginUrl()">Add new</button>
               </div>
             </div>
           </div>
           <div class="col-md-2">
             <button class="btn btn-default swh-action-need-selection" onclick="swh.admin.removeAuthorizedOriginUrl()" disabled>Remove selected</button>
           </div>
         </div>
+        <div class="row mt-3 swh-add-authorized-origin-status">
+        </div>
       </div>
 
       <div class="tab-pane fade" id="swh-unauthorized-origins" role="tabpanel" aria-labelledby="swh-unauthorized-origins-tab">
         <table id="swh-unauthorized-origin-urls" class="table swh-table swh-table-striped" width="100%">
           <thead>
             <tr>
               <th>Url</th>
             </tr>
           </thead>
         </table>
         <div class="row text-right mt-3">
           <div class="col-md-10">
             <div class="input-group">
               <input class="form-control" placeholder="Enter unauthorized origin url prefix to add" type="text" id="swh-unauthorized-url-prefix"/>
               <div class="input-group-append">
                 <button class="btn btn-default" onclick="swh.admin.addUnauthorizedOriginUrl()">Add new</button>
               </div>
             </div>
           </div>
           <div class="col-md-2">
             <button class="btn btn-default swh-action-need-selection" onclick="swh.admin.removeUnauthorizedOriginUrl()" disabled>Remove selected</button>
           </div>
         </div>
+        <div class="row mt-3 swh-add-unauthorized-origin-status">
+        </div>
       </div>
     </div>
   </div>
 </div>
 
 <script>
   swh.webapp.initPage('origin-save-admin');
   swh.admin.initOriginSaveAdmin();
 </script>
 {% endblock %}